<script setup lang="ts">
import { useRouter } from "vue-router";
import AppIcon from "./AppIcon.vue";
const router = useRouter();
interface Props {
  item: API.App.AppItem;
}
const props = defineProps<Props>();
const skipDetail = () => router.push(`/base/app/detail/${props.item.appId}`);
</script>

<template>
  <div :key="item.appId" class="item" @click="skipDetail">
    <AppIcon :src="item.icon" />
    <p>{{ item.name }}</p>
  </div>
</template>

<style scoped lang="scss">
.item {
  margin-top: 16px;
  box-sizing: border-box;

  p {
    // 计算应用名称占用的宽度
    width: calc((375px - var(--padding-value) * 2) / 4);
    margin-top: 10px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.9);
    box-sizing: border-box;
    position: relative;
    left: -25px;
    padding: 0 4px;
    text-align: center;
  }
}
</style>
